<template>
<div class="box">
  <nav-bar class="navbar">
    <div slot="center">商城登录</div>
  </nav-bar>
  <div>
    <p>账号:</p>
    <input type="text" v-model="account"/>
  </div>
  <div>
    <p>密码:</p>
    <input type="password" v-model="password">
  </div>
  <div>
    <button @click="btn">登录</button>
  </div>
</div>
</template>

<script>
import NavBar from '../navbar/NavBar'
import  {login} from 'network/profile'
export default {
  name:'Login',
  components:{
    NavBar
  },
  data() {
    return {
      account: null,
      password:null
    }
  },
  methods:{
    btn(){
      login(this.account,this.password).then(res=>{
        sessionStorage.setItem("token",res.token)
        sessionStorage.setItem("account",res.account)
        this.$router.go(-1)
      }).catch(res=>{
        alert("账号或者密码错误")
      })
    }
  }
}
</script>

<style lang="css" scoped>
.navbar{
  position: fixed;
  top: 0;
  font-size: 18px;
  color: #fff;
  background-color: var(--color-tint);
}
.box{
  width: 100vw;
  height: 60vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box >div{
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
}
button{
  width: 80px;
  height: 30px;
  background-color: var(--color-tint);
  border: none;
  color: #fff;
  border: none;
  border-radius: 5px;
}
p{
  padding-right: 10px;
  font-size: 20px;
}
input{
  border-radius: 10px;
}
</style>